<template>
  <div>
    <PageList>
      <template #header>
        <div style="width: 100%; overflow: hidden;">
          <div style="float: left;">安全帽设备管理</div>
        </div>
      </template>
      <template #filter>
        <el-form ref="RefForm" :model="formData" label-width="200px" status-icon>
          <el-form-item label="是否启用安全帽监测">
            <el-switch v-model="formData.isEnable"></el-switch>
          </el-form-item>
          <el-form-item label="监测区域">
            <el-select v-model="formData.areas" placeholder="请选择">
              <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id.toString()"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="历史记录保留时间(天)">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.keepDays"></el-input>
              </div>
              <div class="fonts">注：历史记录保留的最大时间，超过设置值，系统自动删除文件，且无法查看</div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="sure">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { safetyCatSetting, area } from '@/api/api'
  export default {
    mixins: [listMixin],
    data() {
      return {
        title: '调度管理',
        options: [
          { label: '区域1', value: 1 },
          { label: '区域2', value: 2 },
          { label: '区域3', value: 3 }
        ],
        formData: {
          isEnable: false, // 是否启用安全帽检测
          areas: '', // 监测区域
          keepDays: '' // 历史记录保留时间
        },
        tableData: []
      }
    },
    mounted() {
      // this.getSafetyCatSetting()
      this.getArea()
    },
    methods: {
      // 查询安全帽
      // async getSafetyCatSetting() {
      //   try {
      //     // let response = await request('/SafetyCatSetting/Search', 'post', { pageIndex: 1 })
      //     console.log(response)
      //   } catch (err) {
      //     console.log(err)
      //   }
      // }
      // 获取默认数据
      async getList() {
        this.tableLoading = true
        try {
          const { data } = await safetyCatSetting('get', {}, false)
          this.formData = {
            isEnable: false, // 是否启用安全帽检测
            areas: '', // 监测区域
            keepDays: '' // 历史记录保留时间
          }
          this.formData = data
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      // 获取区域管理
      async getArea(query) {
        try {
          const obj = query || { pageIndex: 1, pageSize: 1e8 }
          const { data: { items: resData, count, pageIndex } } = await area('post', obj, false)
          this.tableData = []
          this.tableData = resData.map(item => {
            item.loadingEdit = false
            item.loadingDel = false
            return item
          })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      // 点击确定更新数据
      async sure() {
        try {
          const { data } = await safetyCatSetting('put', { id: this.formData.id, value: this.formData }, false)
          console.log(data)
          if (data.success == true) {
            this.$message.success('设置成功！')
            this.getList()
          }
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-input {
    width: 217px;
  }
  .tdDiv {
    display: flex;
    .inputDiv {
      width: 217px;
    }
    .fonts {
      color: #999;
      flex: 1;
      line-height: 20px;
      margin-left: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }
</style>
